<template>
	<view>
		<view style="background: #FB8536;height: 400rpx;"></view>
		<view class="postfix">
			<view class="row-css" style="text-align: center;padding: 40rpx;justify-content: center;align-items: center;" @click="showup()">
				金额(元)
				<image style="width: 40rpx;height: 30rpx;" mode="aspectFill" :src="isshow == true ? '../../static/icon_eye.png' : '../../static/icon_eye_in.png'" />
			</view>
			<view style="text-align: center;font-size: 60rpx;margin-bottom: 60rpx;">
				<text v-if="isshow">{{ balance }}</text>
				<text v-else>****</text>
			</view>
			<view class="row-css" style="width: 100%;margin: 80rpx 0;">
				<button class="mini-btn" style="background: #FB8536;" type="primary" size="default" @click="onwithdraw()">提现</button>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="column-css" style="background: #FFFFFF;width: 95%; padding: 20rpx; border-radius: 15rpx;">
				<view class="row-css pop-view-text" style="padding-top: 20rpx;">查询余额请输入验证码</view>
				<view class="row-css pop-view-text">验证码已发送您的手机</view>
				<!-- <view class="row-css pop-view-text">{{ userphone }}</view> -->
				<view style="padding: 20rpx;"><valid-code v-model="vacode" type="bottom" :maxlength="6" @finish="finish"></valid-code></view>
				<view style="color:#00BFFF; margin: 30rpx;font-size: 32rpx; display: flex; flex:1; justify-content: center;align-items: center;" @click="sendcode">
					{{ codeText }}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import validCode from '../../components/valid-code/valid-code.vue';
export default {
	components: {
		validCode
	},
	data() {
		return {
			isshow: false,
			timer: null,
			time: 60,
			codeText: '重新获取验证码',
			userphone: '138297936528',
			payId: '',
			otpOrderNo: '',
			businessNo: '',
			balance: '',
			iscode: 0,
			vacode: ''
		};
	},
	onLoad: function(options) {
		this.payId = options.payId;
	},
	onShow() {
		this.isshow = false;
	},
	methods: {
		showup() {
			if (!this.isshow) {
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/getBalanceCode`,
					method: 'POST',
					data: {
						payId: this.payId
					},
					title: '查询中...',
					success: res => {
						this.otpOrderNo = res.data.data.otpOrderNo;
						this.businessNo = res.data.data.businessNo;
						this.vacode = '';
						this.$refs.popup.open('center');
					}
				});
			} else {
				this.isshow = !this.isshow;
			}
		},
		onwithdraw() {
			let datapurse = {
				category: true,
				payId: this.payId,
				isshow: this.isshow,
				balance: this.balance
			};
			uni.navigateTo({
				url: '../personal/withdraw?datapurse=' + JSON.stringify(datapurse)
			});
		},
		sendcode() {
			if (this.time == 60) {
				this.timer = setInterval(() => {
					this.codeText = `${this.time}s后重新获取验证码`;
					this.time--;
					if (this.time < 0) {
						this.time = 60;
						this.codeText = '重新获取验证码';
						clearInterval(this.timer);
					}
				}, 1000);
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/getBalanceCode`,
					method: 'POST',
					data: {
						payId: this.payId
					},
					title: '验证码发送中...',
					success: res => {
						this.otpOrderNo = res.data.data.otpOrderNo;
						this.businessNo = res.data.data.businessNo;
					}
				});
			}
		},
		recede() {
			this.timer = setInterval(() => {
				this.codeText = `${this.time}s`;
				this.time--;
				if (this.time < 0) {
					this.time = 60;
					this.codeText = '获取验证码';
					clearInterval(this.timer);
					this.timer = null;
				}
			}, 1000);
		},
		finish: function(e) {
			if (this.iscode == 0) {
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/getAccountBalance`,
					method: 'POST',
					data: {
						payId: this.payId,
						otpOrderNo: this.otpOrderNo,
						otpValue: e,
						businessNo: this.businessNo
					},
					title: '余额查询中...',
					success: res => {
						this.isshow = !this.isshow;
						this.balance = res.data.data.balance;
						this.$refs.popup.close();
					},
					complete: res => {
						this.iscode = 0;
					}
				});
				this.iscode = 1;
			}
			console.log('d=======w======>', e);
		}
	},
	onUnload() {
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = null;
		}
	}
};
</script>

<style>
page {
	/* background: #ffffff; */
	font-size: 30rpx;
}

.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.postfix {
	position: fixed;
	background: #ffffff;
	border-radius: 10rpx;
	left: 80rpx;
	right: 80rpx;
	top: 120rpx;
	height: 400rpx;
}
.mini-btn {
	width: 100%;
	background: #e04b28;
	font-size: 28rpx;
	padding: 10rpx 0;
	margin: 0 20rpx;
}

.pop-view-text {
	padding-top: 20rpx;
	justify-content: center;
	font-size: 32rpx;
	color: #575858;
	text-align: center;
}
</style>
